<template>
    <el-row :gutter="10" justify="space-between">
        <el-col :span="5">
            <div style="min-width: 130px;min-height: 800px;border: 1px solid rgba(228, 228, 228, 1);">
                <div class="tabcont" v-for="(item, index) in optiontype" :key="index"
                    :class="{ selected: isActive === index }" @click="colorbtn(index, item)">
                    <div class="ml-20px mr-20px">
                        <el-icon>
                            <component :is="item.icon" />
                        </el-icon>
                    </div>
                    <div style="width: 140px; line-height: 30px;">{{ item.label }}</div>
                </div>
            </div>
        </el-col>
        <el-col :span="19">
            <el-button @click="addbtn" class="todo_style mb-10px" type="primary">创建新任务</el-button>
            <div v-loading="loading" element-loading-text="Loading..."
                :style="loading === false ? 'background : #fff; border: 1px solid rgba(228, 228, 228, 1);' : 'background: #fff;'"
                class="p-15px">
                <div v-if="todoList.length != 0 && loading === false">
                    <!-- 全选按钮 -->
                    <div class="flex items-center justify-between">
                        <div class="flex items-center">
                            <el-checkbox v-model="isAllSelected" @change="allChange" :indeterminate="isIndeterminate" />
                            <div class="checkbox-all">全选</div>
                        </div>
                        <div>
                            <el-button class="delete_style" @click="deletebtn">批量删除</el-button>
                        </div>
                    </div>
                    <!-- 列表项 -->
                    <div v-for="(item, index) in todoList" :key="index">
                        <div class="vertical-line"></div>
                        <el-row :gutter="10" justify="space-between" class="todo-item">
                            <el-col :span="1">
                                <el-checkbox-group v-model="selectedIds">
                                    <el-checkbox :label="item.id" :value="item.id" />
                                </el-checkbox-group>
                            </el-col>
                            <el-col :span="queryParams.pendingType === 3 ? 23 : 20">
                                <div class="todo_title">{{ item.title }}</div>
                                <div class="flex items-center mt-14px mb-7px">
                                    <div class="todo_tag">
                                        {{ item.content }}
                                    </div>
                                </div>
                                <div v-if="item.fileDOList" class="contpt">
                                    <div v-for="item2 in item.fileDOList" :key="item2" class="ptlist">
                                        <UploadImg disabled v-model="item2.url" height="80px" width="80px" :limit="1" />
                                    </div>
                                </div>
                                <div class="flex items-center todo_starttime">
                                    <div class="mr-40px" v-if="queryParams.pendingType === 1 && loading === false"
                                        style="color:#CC352F;">截止时间：{{
                                            formatTime(item.deadlineTime, 'yyyy-MM-dd HH:mm:ss') }}</div>
                                    <div class="mr-40px" v-else>
                                        截止时间：{{ formatTime(item.deadlineTime, 'yyyy-MM-dd HH:mm:ss') }}
                                    </div>
                                    <div class="mr-40px">创建时间：{{ formatTime(item.createTime, 'yyyy-MM-dd HH:mm:ss')
                                        }}</div>
                                    <div>来源：{{ item.source }}</div>
                                </div>
                            </el-col>
                            <el-col :span="3" class="vertical-center"
                                v-if="queryParams.pendingType === 2 || queryParams.pendingType === 3 ? false : true">
                                <el-button v-if="item.source === '数字治理' && item.title === '新网格员信息审核工作'"
                                    @click="handleGridmember" class="todo_style" type="primary">去完成</el-button>
                                <el-button v-else-if="item.source === '数字治理' && item.title === '新村民信息审核工作'"
                                    @click="handleResident" class="todo_style" type="primary">去完成</el-button>
                                <el-button v-else @click="completebtn(item.id)" class="todo_style"
                                    type="primary">去完成</el-button>
                            </el-col>
                            <el-col :span="3" class="vertical-center"
                                v-if="queryParams.pendingType === 2">
                                <el-button class="todo_style" style="background: #eff0f0;color: #888;border: 1px solid #eff0f0;"
                                    type="primary">已完成</el-button>
                            </el-col>
                        </el-row>
                    </div>
                </div>
                <div v-if="todoList.length === 0 && loading === false">
                    <el-empty description="暂无待办" />
                </div>
            </div>
            <!-- 分页 -->
            <el-pagination style="font-size: 14px;justify-content: flex-end;margin-top:20px;"
                v-model:current-page="queryParams.pageNo" :hide-on-single-page="value"
                v-model:page-size="queryParams.pageSize" :page-sizes="pageSizes"
                layout="total,sizes,prev, pager, next,jumper" :total="total" @size-change="selectchange"
                @current-change="handleCurrentChange" />
        </el-col>
    </el-row>
    <AddDialog v-model:visible="addDialogVisible" @getis-show="getisShow" :editData="editData"
        @getedit-data="geteditData" />
</template>

<script lang="ts" setup>
import * as getTodoApi from '@/api/todoCenter/index'
import { formatTime } from '@/utils'
import AddDialog from './components/addDialog.vue'
const { push } = useRouter()
const isActive = ref(0)
const total = ref(0) // 列表的总页数
const value = ref(true)
const pageSizes = [10, 20, 50, 100]
const queryParams = reactive({
    pageNo: 1,
    pageSize: 10,
    pendingType: 0,
})
const loading = ref(true) // 列表加载中
const addDialogVisible = ref(false)
const editData = ref({})
const getisShow = (val) => {
    addDialogVisible.value = val
}
const geteditData = async (val) => {
    await handleCurrentChange(val)
}
// 跳转村民管理
const handleResident = () => {
    ElMessageBox.confirm(
        '是否跳转居民档案审核当前村民?',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(async () => {
        push({
            name: 'residentDossier'
        })
    })
}

// 跳转网格员管理
const handleGridmember = () => {
    ElMessageBox.confirm(
        '是否跳转网格员管理审核当前网格员?',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(async () => {
        push({
            name: 'gridMember'
        })
    })
}
const todoList = ref([])
const optiontype = ref([{
    label: '进行时',
    value: 0,
    icon: 'Clock'
},
{
    label: '已超期',
    value: 1,
    icon: 'Warning'
},
{
    label: '已完成',
    value: 2,
    icon: 'CircleCheck'
},
{
    label: '我创建的',
    value: 3,
    icon: 'User'
}])
/** 条数变化 */
const selectchange = (e) => {
    queryParams.pageSize = e
    queryParams.pageNo = 1
    getList()
}
/** 页码变化 */
const handleCurrentChange = (e) => {
    queryParams.pageNo = e
    getList()
}
/** 选项卡颜色 */
const colorbtn = (index, item) => {
    isActive.value = index
    queryParams.pendingType = item.value
    queryParams.pageNo = 1
    total.value = 0
    value.value = true
    getList()
}
/** 新增待办 */
const addbtn = () => {
    addDialogVisible.value = true
    editData.value = {}
}
// 获取待办列表
const getList = async () => {
    getTodoApi.getTodoPage(queryParams).then((res) => {
        total.value = res.total
        todoList.value = res.list
        if (todoList.value.length === 0) {
            value.value = true
        } else {
            value.value = false
        }
        loading.value = false
    }).catch(error => {
        loading.value = false
    })
}
//完成待办
const completebtn = (id) => {
    ElMessageBox.confirm(
        '是否确认完成当前待办?',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(async () => {
        await getTodoApi.completeTodo(id)
        ElMessage.success('已完成待办')
        // 刷新列表
        await colorbtn(2,{label: '已完成', value: 2, icon: 'CircleCheck'})
    }).catch(() => {
        ElMessage.info('已取消完成待办')
    })
}
// 存储被选中的项的ID
const selectedIds = ref([])
const isAllSelected = ref(false)

// 监听selectedIds变化，更新isAllChecked  
watch(() => selectedIds.value, (newValue) => {
    isAllSelected.value = newValue.length === todoList.value.length;
});
// 处理全选变化  
const allChange = (value) => {
    if (value) {
        selectedIds.value = todoList.value.map(item => item.id);
    } else {
        selectedIds.value = []
    }
};
// 计算属性，判断全选框是否应该处于半选状态  
const isIndeterminate = computed(() => {
    return selectedIds.value.length > 0 && selectedIds.value.length < todoList.value.length;
});

// 批量删除
const deletebtn = async () => {
    const params = {
        ids: selectedIds.value.join(','),
        type: queryParams.pendingType
    }
    if (selectedIds.value.length == 0) {
        ElMessage.warning('至少选中一条数据！')
        return
    }
    ElMessageBox.confirm(
        '是否确认删除当前选中待办?',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(async () => {
        await getTodoApi.deleteTodoList(params)
        ElMessage.success('删除成功')
        selectedIds.value = []
        // 刷新列表
        await getList()
    }).catch(() => {
        ElMessage.info('已取消删除待办')
    })
}
/** 初始化 **/
onMounted(() => {
    getList()
})
onUpdated(() => {
})


</script>

<style scoped>
.tabcont {
    width: calc(100% -3px);
    height: 30px;
    text-align: left;
    padding: 5px 0;
    color: #8e8e8e;
    cursor: pointer;
    line-height: 33px;
    display: flex;
    justify-content: left;
    border-right: 3px solid #fff;
}

.selected {
    border-right: 3px solid #409eff;
    color: #409eff;
    background-color: #22badd21;
}

.vertical-line {
    width: 100%;
    height: 1px;
    border-top: 1px solid rgba(230, 230, 230, 1);
    margin: 10px 0;
}

.todo_title {
    height: 20px;
    line-height: 20px;
    color: rgba(69, 69, 69, 1);
    font-size: 20px;
}

.todo_tag {
    height: 20px;
    line-height: 20px;
    color: rgba(140, 140, 140, 1);
    font-size: 14px;
}

.todo_starttime {
    line-height: 20px;
    color: rgba(140, 140, 140, 1);
    font-size: 14px;
}

.todo-item {
    border: 1px solid transparent;
    padding: 5px 0;
    user-select: none;
}

.todo-item:hover {
    border-radius: 6px;
    background-color: rgba(251, 129, 7, 0.08);
    border: 1px solid rgba(244, 145, 0, 1);
}

::v-deep .el-checkbox__label {
    display: none !important;
}

.checkbox-all {
    display: inline-block;
    color: rgba(69, 69, 69, 1);
    font-size: 13px;
    margin-left: 8px;
}

.vertical-center {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.delete_style {
    width: 80px;
    height: 30px;
    background-color: rgba(255, 255, 255, 1);
    border: 1px solid rgba(187, 187, 187, 1);
    color: var(--el-button-text-color);
}

.delete_style:hover {
    opacity: 0.8;
}

.todo_style {
    background-color: #0266FF;
}

.todo_style:hover {
    opacity: 0.8;
}

::v-deep .el-checkbox {
    height: 14px;
}

.contpt {
    display: flex;
}

.ptlist {
    margin-right: 20px;
    pointer-events: none;
}

.contpt>.ptlist:last-child {
    margin-right: 0 !important;
}

::v-deep .upload .el-upload .el-upload-dragger {
    border: 1px solid var(--el-border-color-darker) !important;
}
</style>